<template>
	<view class="record-container">
		<swiper class="record-swiper" :indicator-dots="false" :autoplay="false" :duration="500">
			<swiper-item class="record-swiper-item" v-for="(target,index) in targetsData" :key="index">
				<wyb-slide-listener @slideLeft="onSlide" @slideRight="onSlide">
					<view class="first">
						<view class="title-box">
							<view class="title title-height">
								<text class="pl-12">指标名称</text>
							</view>
							<view class="content">
								<text>{{target.name}}</text>
							</view>
						</view>
						<view class="des-box">
							<view class="des title-height">
								<text class="pl-12">指标说明</text>
							</view>
							<view class="content" style="display: flex;flex-wrap: wrap;flex-direction: row;">
								<text>{{target.content}}</text>

								<u-link v-if="target.file_name"
									style="align-self: flex-end;justify-content: flex-end;margin-right: 5px;"
									:href="`http://192.168.0.234:8080${target.file_url}`" :text="target.file_name"
									:under-line="true"></u-link>
							</view>
						</view>
					</view>

					<view class="two">
						<view class="content">
							<text>评价人：{{target.comment.userName}}</text>
						</view>
						<view class="content">
							<text>评价小组：{{target.comment.groupName}}</text>
						</view>
						<view class="content">
							<text>评价结果：{{isNull(target.choiceType) ? target.comment.input_value: target.comment.options_value }}</text>
						</view>
						<view class="text-area-box">
							<text>工作亮点</text>
							<u--textarea v-model="target.comment.light" disabled></u--textarea>
						</view>
						<view class="text-area-box">
							<text>存在问题</text>
							<u--textarea v-model="target.comment.content" disabled></u--textarea>
						</view>
						<view class="text-area-box">
							<text>工作建议</text>
							<u--textarea v-model="target.comment.opinions" disabled></u--textarea>
						</view>
					</view>
				</wyb-slide-listener>
			</swiper-item>
		</swiper>
		<view class="media">
			<u-cell-group>
				<u-cell isLink icon="file-text-fill" title="实证资料" @click="viewFile">
					<u-badge slot="value" :showZero="true" :value="fileNum"></u-badge>
				</u-cell>
			</u-cell-group>
		</view>
	</view>

</template>

<script>
	import {
		getTargetDetail
	} from "@/api/supervise/index.js"
	import {
		isNotNull,
		isNull
	} from "@/utils/common.js"
	import wybSlideListener from '@/components/wyb-slide-listener/wyb-slide-listener.vue'
	export default {
		data() {
			return {
				queryData: {},
				targetsData: [],
				commentsData: [],
				index: 0,
				fileNum: 0,
				isNull
			}
		},
		onLoad(option) {
			if (Object.keys(option).length > 0) {
				const queryData = JSON.parse(decodeURIComponent(option.queryData));
				this.queryData = queryData;
				uni.setNavigationBarTitle({
					title: queryData.name
				});
				this.getTargetDetail();
			}
		},
		methods: {
			getFileNum() {
				let num = 0;
				const comment = this.commentsData[this.index]
				num += comment.imgUrls.length;
				num += comment.voiceUrls.length;
				num += comment.videoUrls.length;
				this.fileNum = num;
			},
			onSlide: function(e) {
				let type = e.type
				switch (type) {
					case 'slideLeft':
						if (this.index < this.targetsData.length - 1) {
							this.index++;
							this.getFileNum();
						}
						break
					case 'slideRight':
						if (this.index > 0) {
							this.index--;
							this.getFileNum();
						}
						break
				}
			},
			getTargetDetail() {
				const params = {
					targetId: this.queryData.id,
					finishState: this.queryData.finishState,
					createTime: this.queryData.createTime,
					activityId: this.queryData.activityId,
					schoolId: this.queryData.schoolId

				};
				getTargetDetail(params).then(res => {
					const targets = res.targets;
					const comments = res.comments;
					targets.forEach(target => {
						if (comments.length > 0) {
							comments.forEach(comment => {
								if (target.id === comment.targetId) {
									target["comment"] = comment;
								}
							})
						} else {
							target["comment"] = {
								userName: "无",
								groupName: "无",
								options_value: "无",
								light: "无",
								content: "无",
								opinions: "无",
							}
						}
					});
					this.targetsData = targets;
					this.commentsData = comments;
					this.commentsData.forEach(item => {
						item["imgUrls"] = item.imgUrl.split(",") || [];
						item["voiceUrls"] = item.voiceUrl.split(",") || [];
						item["videoUrls"] = item.videoUrl.split(",") || [];
					})
					this.getFileNum()
				});
			},
			viewFile() {
				if (this.fileNum == 0) {
					this.$u.toast("暂无实证资料");
					return;
				}
				const comment = this.commentsData[this.index];
				const fileUrls = {
					imgUrls: comment.imgUrls,
					voiceUrls: comment.voiceUrls,
					videoUrls: comment.videoUrls,
				}
				this.$tab.navigateTo("/pages/empirical-file/empirical-file?fileUrls=" + encodeURIComponent(JSON
					.stringify(fileUrls)));
			}

		},
	}
</script>

<style lang="scss" scoped>
	.record-container {
		font-size: 20px;
		padding-bottom: 15px;
		height: 100vh;
		overflow-y: auto;
		// padding: 15px;

		.record-swiper {
			min-height: 100vh;

			.record-swiper-item {
				overflow: auto;
			}
		}

		.two {
			padding: 20px 12px 50px;

			.text-area-box {
				margin: 20px 0;
			}
		}



		.title-height {
			height: 7vh;
			line-height: 7vh;
			background-color: #F2F2F0;
		}

		.content {
			display: flex;
			align-items: center;
			background-color: #fff;
			height: auto;
			padding: 12px 12px;
		}

		.pl-12 {
			padding-left: 12px;
		}
	}

	.media {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 20px;
		height: 40px;
	}
</style>